<template>
  <div class="main_right">
    <div class="page_top">
      <section>
        <ol class="breadcrumb">
          <li>
            <router-link to="/nav/welcome">
              <span class="glyphicon glyphicon-home"></span> 首页
            </router-link>
          </li>
          <li>
            <span class="glyphicon glyphicon-stats"></span> 实时监控
          </li>
          <li class="active">实时数据</li>
        </ol>
      </section>
    </div>
    <div class="page_operation_bar">
      <div id="showDiv">
        <form class="form-inline">
          <div class="form-group col-md-3" style="padding-left: 12px">
            <label class="control-label" for="dataSource">数据测点 &nbsp;</label>
            <div class="col-sm-7 input-group" id="dataSource">
              <select
                class="form-control radius"
                name="dataSource"
                ng-model="dataSource"
                id="refreshPart"
                ng-options="item for item in options.dataSource"
              ></select>
            </div>
          </div>
          <div class="form-group col-md-3" style="padding-left: 44px">
            <label class="control-label" for="sampleFre">采样时间 &nbsp;</label>
            <div class="col-sm-7 input-group" id="sampleFre">
              <input type="text" class="form-control" name="sampleFre" ng-model="sampleFre">
              <span class="input-group-addon">s</span>
            </div>
          </div>
          <div class="form-group col-md-3" style="padding-left: 44px">
            <label class="control-label" for="bands">分频数 &nbsp;</label>
            <div class="col-sm-7 input-group" id="bands">
              <select
                class="form-control"
                ng-model="bands"
                ng-options="item for item in options.bands"
              ></select>
            </div>
          </div>
          <div class="form-group" style="position: absolute; right: 20px">
            <button
              type="button"
              class="btn btn-primary btn3"
              data-toggle="modal"
              data-target="#datainputModal"
              style="margin-top: 0"
              ng-click="previewHistory()"
            >数据导入</button>
            
            <button
              type="button"
              class="btn btn-primary btn4"
              @click="startSample()"
              style="margin-top: 0"
            >开始分析</button>
          </div>
        </form>
      </div>
    </div>
    <!--复选框-->
    <div class="col-md-10"></div>
    <div
      class="col-md-2 checkbox checkbox-primary"
      style="margin-bottom: 10px; padding-left: 50px;"
    >
      <input id="checkbox1" class="styled" type="checkbox" checked="checked" ng-click="checkBox()">
      <label for="checkbox1">
        是否滤除趋势项
        <span class="glyphicon glyphicon-filter"></span>
      </label>
    </div>
    <div class="step-pane">
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-defined">
            <div class="panel-heading panel-p">
              <c>原始实测数据时域曲线</c>
            </div>
            <div style="height: 428px" id="myChart1"></div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-defined">
            <div class="panel-heading">
              <c>傅里叶频谱分割图</c>
            </div>
            <div style="height: 428px" id="myChart2"></div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-defined">
            <div class="panel-heading">
              <c>各单频分量曲线</c>
            </div>
            <div style="height: 428px" id="myChart3"></div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-defined">
            <div class="panel-heading">
              <c>希尔伯特频谱图</c>
            </div>
            <div style="height: 428px" id="myChart4"></div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <!-- Modal 数据导入模态框-->
    <div
      class="modal fade"
      id="datainputModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="col-sm-5 modal-title" id="exampleModalLabel">请选择要上传的txt文件</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div>
            <div class="panel panel-defined">
              <div class="panel-heading">
                <c>历史上传数据</c>
              </div>
              <table
                id="historyTable"
                data-toggle="table"
                data-height="200"
                class="table table-hover dataTable"
                role="grid"
              ></table>
            </div>
          </div>
          <div class="modal-body">
            <div class="file-loading">
              <input type="file" id="inputFile" name="inputFile">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button
              type="button"
              class="btn btn-primary"
              data-dismiss="modal"
              ng-click="addOption()"
            >确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myChart",
  data() {
    return {
      chart: null,
      getOption: function(legend, datax, datay, namex, namey, markLine) {
        var option = {
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "line"
            }
          },
          // 辅助工具箱
          toolbox: {
            y: 15,
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataZoom: {
                show: true
              },
              dataView: {
                show: true
              },
              saveAsImage: {
                show: true
              },
              restore: {
                show: true
              }
            }
          },
          // 数据区域缩放
          dataZoom: {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            height: 20
          },
          grid: {
            left: "4%",
            right: "7%",
            bottom: "15%",
            containLabel: true
          },
          // 横轴坐标轴
          xAxis: [
            {
              boundaryGap: true,
              splitLine: { show: false },
              type: "category",
              axisLabel: {
                textStyle: {
                  color: "#333"
                }
              },
              data: datax,
              name: namex,
              nameLocation: "end",
              nameGap: "1",
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                },
                onZero: true
              },
              nameTextStyle: {
                color: "#333",
                fontSize: 12
              },
              axisTick: {
                show: true
              }
            }
          ],
          // 纵轴坐标轴
          yAxis: [
            {
              type: "value",
              scale: true,
              name: namey
            }
          ],
          // 数据内容数组
          series: [
            {
              name: legend,
              type: "line",
              data: datay,
              markLine: {
                data: markLine
              }
            },
            {
              type: "line"
            },
            {
              type: "line"
            }
          ]
        };
        return option;
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    startSample() {
      this.data = {
        categoryData: null,
        tmp: null
      };
      this.$http.get("../static/Temp_Data.json").then(response => {
        this.dataRaw = response.data;
        //console.log(this.dataRaw);
        this.data.categoryData = [];
        this.data.tmp = [];
        for (var i = 0; i < this.dataRaw.TmpyAxis.length / 100; i++) {
          this.data.categoryData.push(i);
          this.data.tmp.push(this.dataRaw.TmpyAxis[i]);
        }
        this.chart1.setOption(
          this.getOption(
            "水压1",
            this.data.categoryData,
            this.data.tmp,
            "时间(s)",
            "水压(m)"
          )
        );
        this.chart2.setOption(
          this.getOption(
            "幅值",
            this.data.categoryData,
            this.data.tmp,
            "时间(s)",
            "水压(m)"
          )
        );
        this.chart3.setOption(
          this.getOption(
            "油温",
            this.data.categoryData,
            this.data.tmp,
            "时间(s)",
            "水压(m)"
          )
        );
        this.chart4.setOption(
          this.getOption(
            "水位",
            this.data.categoryData,
            this.data.tmp,
            "时间(s)",
            "水压(m)"
          )
        );
      });
    },
    initChart() {
      this.chart1 = this.$echarts.init(document.getElementById("myChart1"));
      this.chart2 = this.$echarts.init(document.getElementById("myChart2"));
      this.chart3 = this.$echarts.init(document.getElementById("myChart3"));
      this.chart4 = this.$echarts.init(document.getElementById("myChart4"));
      var option1 = this.getOption("", [], [], "时间(s)", "水压(m)");
      var option2 = this.getOption("", [], [], "频率(Hz)", "幅值(m)");
      var option3 = this.getOption("", [], [], "时间(s)", "幅值(m)");
      var option4 = this.getOption("", [], [], "时间(s)", "频率(Hz)");
      this.chart1.setOption(option1);
      this.chart2.setOption(option2);
      this.chart3.setOption(option3);
      this.chart4.setOption(option4);
    }
  }
};
</script>
